<template>
  <div class="scenic-recommend-container">
    <div class="scenic-recommend-header">
      <div class="header-actions">
        <el-button type="primary" plain size="small" @click="goBack">
          <el-icon><Back /></el-icon> 返回首页
        </el-button>
      </div>
      <h1>景点推荐</h1>
      <p>发现青岛自然保护区精选景点</p>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20">
      <!-- 左侧推荐列表 -->
      <el-col :span="16">
        <!-- 热门保护区 -->
        <el-card class="recommend-card">
          <template #header>
            <div class="card-header">
              <span>热门景点推荐</span>
              <el-tag type="danger" effect="dark">热门</el-tag>
            </div>
          </template>

          <div v-loading="loading">
            <div v-if="hotSpots.length > 0" class="recommend-list">
              <el-row :gutter="20">
                <el-col
                  v-for="spot in hotSpots"
                  :key="spot.attributes.OBJECTID"
                  :xs="24"
                  :sm="12"
                  :md="8"
                >
                  <div class="scenic-card" @click="viewFeatureDetails(spot)">
                    <div class="scenic-image">
                      <el-image
                        :src="spot.attributes.PhotoBase64 || '/src/assets/default-scenic.jpg'"
                        fit="cover"
                        :preview-src-list="
                          spot.attributes.PhotoBase64 ? [spot.attributes.PhotoBase64] : []
                        "
                      >
                        <template #error>
                          <div class="image-placeholder">
                            <el-icon><Picture /></el-icon>
                          </div>
                        </template>
                      </el-image>
                      <div class="scenic-type">
                        <el-tag :type="getTypeTagType(spot.attributes.ScenicType)" size="small">
                          {{ spot.attributes.ScenicType }}
                        </el-tag>
                      </div>
                    </div>
                    <div class="scenic-info">
                      <h3>{{ spot.attributes.ScenicName }}</h3>
                      <p class="scenic-desc">{{ truncateText(spot.attributes.Description, 50) }}</p>
                      <div class="scenic-price">
                        {{ spot.attributes.Price ? spot.attributes.Price + '元' : '免费' }}
                      </div>
                      <div class="scenic-status">
                        <el-tag :type="getStatusTagType(spot.attributes.Status)" size="small">
                          {{ spot.attributes.Status }}
                        </el-tag>
                        <el-button
                          type="primary"
                          size="small"
                          text
                          @click.stop="viewFeatureDetails(spot)"
                        >
                          查看详情
                        </el-button>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-empty v-else description="暂无热门景点数据"></el-empty>
          </div>
        </el-card>

        <!-- 景区分类推荐 -->
        <el-card class="recommend-card">
          <template #header>
            <div class="card-header">
              <span>景点精选</span>
              <el-radio-group v-model="activeArea" size="small" @change="handleAreaChange">
                <el-radio-button label="erdihu">胶南灵山岛保护区</el-radio-button>
              <el-radio-button label="yunmen">大公岛保护区</el-radio-button>
              <el-radio-button label="bailang">大泽山保护区</el-radio-button>
              <el-radio-button label="xiashan">崂山保护区</el-radio-button>
              <el-radio-button label="binhai">胶州艾山保护区</el-radio-button>
              <el-radio-button label="mihe">马山保护区</el-radio-button>
              </el-radio-group>
            </div>
          </template>

          <div v-loading="loading">
            <div v-if="areaSpots.length > 0" class="recommend-list">
              <el-row :gutter="20">
                <el-col
                  v-for="spot in areaSpots"
                  :key="spot.attributes.OBJECTID"
                  :xs="24"
                  :sm="12"
                  :md="8"
                >
                  <div class="scenic-card" @click="viewFeatureDetails(spot)">
                    <div class="scenic-image">
                      <el-image
                        :src="spot.attributes.PhotoBase64 || '/src/assets/default-scenic.jpg'"
                        fit="cover"
                        :preview-src-list="
                          spot.attributes.PhotoBase64 ? [spot.attributes.PhotoBase64] : []
                        "
                      >
                        <template #error>
                          <div class="image-placeholder">
                            <el-icon><Picture /></el-icon>
                          </div>
                        </template>
                      </el-image>
                      <div class="scenic-type">
                        <el-tag :type="getTypeTagType(spot.attributes.ScenicType)" size="small">
                          {{ spot.attributes.ScenicType }}
                        </el-tag>
                      </div>
                    </div>
                    <div class="scenic-info">
                      <h3>{{ spot.attributes.ScenicName }}</h3>
                      <p class="scenic-desc">{{ truncateText(spot.attributes.Description, 50) }}</p>
                      <div class="scenic-price">
                        {{ spot.attributes.Price ? spot.attributes.Price + '元' : '免费' }}
                      </div>
                      <div class="scenic-status">
                        <el-tag :type="getStatusTagType(spot.attributes.Status)" size="small">
                          {{ spot.attributes.Status }}
                        </el-tag>
                        <el-button
                          type="primary"
                          size="small"
                          text
                          @click.stop="viewFeatureDetails(spot)"
                        >
                          查看详情
                        </el-button>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-empty v-else description="暂无景点数据"></el-empty>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧地图和筛选 -->
      <el-col :span="8">
        <!-- 地图预览 -->
        <el-card class="map-card">
          <template #header>
            <div class="card-header">
              <span>地图预览</span>
            </div>
          </template>
          <div id="scenicMapView" class="map-container"></div>
        </el-card>

        <!-- 景点类型筛选 -->
        <el-card class="filter-card">
          <template #header>
            <div class="card-header">
              <span>景点类型筛选</span>
            </div>
          </template>

          <div class="filter-options">
            <el-checkbox-group v-model="selectedTypes" @change="handleTypeChange">
              <el-checkbox label="自然景观">自然景观</el-checkbox>
              <el-checkbox label="人文景观">人文景观</el-checkbox>
              <el-checkbox label="历史遗迹">历史遗迹</el-checkbox>
              <el-checkbox label="休闲娱乐">休闲娱乐</el-checkbox>
              <el-checkbox label="观景台">观景台</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-card>

        <!-- 景点状态筛选 -->
        <el-card class="filter-card">
          <template #header>
            <div class="card-header">
              <span>景点状态筛选</span>
            </div>
          </template>

          <div class="filter-options">
            <el-checkbox-group v-model="selectedStatus" @change="handleStatusChange">
              <el-checkbox label="正常开放">正常开放</el-checkbox>
              <el-checkbox label="维护中">维护中</el-checkbox>
              <el-checkbox label="暂停开放">暂停开放</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <!-- 详情抽屉 -->
  <el-drawer v-model="showDetailsDrawer" title="景点详情" direction="rtl" size="500px">
    <div v-if="currentFeature" class="feature-details">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="景点名称">
          {{ currentFeature.attributes.ScenicName || '无' }}
        </el-descriptions-item>

        <el-descriptions-item label="景点类型">
          <el-tag :type="getTypeTagType(currentFeature.attributes.ScenicType)">
          {{ currentFeature.attributes.ScenicType || '无' }}
        </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="景点描述">
          {{ currentFeature.attributes.Description || '无描述信息' }}
        </el-descriptions-item>

        <el-descriptions-item label="状态">
          <el-tag :type="getStatusTagType(currentFeature.attributes.Status)">
            {{ currentFeature.attributes.Status || '未知' }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="门票价格">
          {{ currentFeature.attributes.Price ? currentFeature.attributes.Price + '元' : '免费' }}
        </el-descriptions-item>

        <el-descriptions-item label="所属保护区">
          {{ currentFeature.attributes.OwnerScenic || '无' }}
        </el-descriptions-item>

        <el-descriptions-item label="景点图片" v-if="currentFeature.attributes.PhotoBase64">
          <el-image
            style="width: 100%; max-height: 300px"
            :src="currentFeature.attributes.PhotoBase64"
            fit="contain"
          ></el-image>
        </el-descriptions-item>

        <el-descriptions-item label="反馈状态" v-if="maintenanceInfo.length > 0">
          <el-tag v-if="hasActiveMaintenanceIssues" type="warning">有反馈中</el-tag>
          <el-tag v-else type="success">正常</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 反馈信息列表 -->
      <div v-if="maintenanceInfo.length > 0" class="maintenance-info">
        <h3>反馈信息</h3>
        <el-collapse accordion>
          <el-collapse-item
            v-for="(item, index) in maintenanceInfo"
            :key="index"
            :title="item.title"
            :name="index"
          >
            <div class="maintenance-item">
              <p><strong>状态：</strong>
                <el-tag :type="getMaintenanceStatusType(item.status)">
                  {{ getMaintenanceStatusText(item.status) }}
                </el-tag>
              </p>
              <p><strong>上报时间：</strong> {{ formatDate(item.reportDate) }}</p>
              <p><strong>严重程度：</strong> {{ getMaintenanceSeverityText(item.severity) }}</p>
              <p><strong>问题描述：</strong> {{ item.description }}</p>

              <div v-if="item.photoBase64" class="maintenance-image">
                <el-image
                  style="width: 100%; max-height: 200px"
                  :src="item.photoBase64"
                  fit="contain"
                  :preview-src-list="[item.photoBase64]"
                ></el-image>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="details-actions">
        <el-button type="success" @click="addToFavorites(currentFeature)">
          <el-icon><Star /></el-icon> 收藏景点
        </el-button>
        <el-button type="primary" @click="reportMaintenance(currentFeature)">
          <el-icon><Tools /></el-icon> 信息反馈
        </el-button>
      </div>
    </div>
    <div v-else class="no-feature-selected">
      <el-empty description="没有选中景点"></el-empty>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
declare global {
  interface Window {
    _tempFeatures: __esri.Graphic[]
  }
}
import { ref, onMounted, watch, computed } from 'vue'
import { Back, Star, Picture, Tools } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/userStore'
import { useRouter } from 'vue-router'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import { gaodeLayer } from '@/utils/GaoDeBaseLayer'

// 用户存储和路由
const userStore = useUserStore()
const router = useRouter()

// 地图和图层
let view: __esri.MapView
let featureLayer: __esri.FeatureLayer

// 状态变量
const loading = ref(true)
const allFeatures = ref<any[]>([])
const showDetailsDrawer = ref(false)
const currentFeature = ref<any>(null)
const maintenanceInfo = ref<any[]>([])

// 当前选中的景区
const activeArea = ref('erdihu') // 默认胶南灵山岛保护区

// 筛选条件
const selectedTypes = ref<string[]>(['自然景观', '人文景观', '历史遗迹', '休闲娱乐', '观景台'])
const selectedStatus = ref<string[]>(['正常开放', '维护中', '暂停开放'])

// 各个景区的中心坐标
const areaCenters = {
  erdihu: [120.179558,35.765965], // 胶南灵山岛坐标
  yunmen: [120.503415,35.967122], // 大公岛坐标
  bailang: [120.022251,37.00615], // 大泽山坐标
  xiashan: [120.605305,36.198964], // 崂山坐标
  binhai: [119.93718,36.121442], // 胶州艾山坐标
  mihe: [120.651138,36.340289] // 马山坐标
}

// 计算属性：热门景点（取前6个）
const hotSpots = computed(() => {
  return allFeatures.value
    .filter(
      (spot) =>
        selectedTypes.value.includes(spot.attributes.ScenicType) &&
        selectedStatus.value.includes(spot.attributes.Status || '正常开放'),
    )
    .slice(0, 6)
})

// 计算属性：当前景区的景点
const areaSpots = computed(() => {
  const currentAreaName = getCurrentAreaName()
  return allFeatures.value.filter(
    (spot) =>
      spot.attributes.OwnerScenic === currentAreaName &&
      selectedTypes.value.includes(spot.attributes.ScenicType) &&
      selectedStatus.value.includes(spot.attributes.Status || '正常开放'),
  )
})

// 计算属性：当前保护区的反馈信息
const hasActiveMaintenanceIssues = computed(() => {
  if (!maintenanceInfo.value.length) return false
  return maintenanceInfo.value.some(item => item.status === 'pending' || item.status === 'in-progress')
})

// 从要素中提取属性数据
const extractFeatureData = (feature: any) => {
  if (!feature || !feature.attributes) return null

  return {
    attributes: { ...feature.attributes },
    // 存储坐标信息，但不存储完整的geometry对象
    geometryInfo: feature.geometry
      ? {
          x: feature.geometry.type === 'point' ? (feature.geometry as __esri.Point).x : null,
          y: feature.geometry.type === 'point' ? (feature.geometry as __esri.Point).y : null,
          type: feature.geometry.type,
        }
      : null,
  }
}

// 根据类型获取标签类型
const getTypeTagType = (type: string) => {
  switch (type) {
    case '自然景观':
      return 'success'
    case '人文景观':
      return 'primary'
    case '历史遗迹':
      return 'warning'
    case '休闲娱乐':
      return 'info'
    case '观景台':
      return 'danger'
    default:
      return 'info'
  }
}

// 根据状态获取标签类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case '正常开放':
      return 'success'
    case '维护中':
      return 'warning'
    case '暂停开放':
      return 'danger'
    default:
      return 'info'
  }
}

// 截断文本
const truncateText = (text: string, maxLength: number) => {
  if (!text) return '暂无描述'
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
}

// 查询所有景点数据
const queryAllFeatures = async () => {
  if (!featureLayer) return

  loading.value = true
  try {
    // 创建查询
    const query = featureLayer.createQuery()
    query.where = '1=1' // 查询所有数据
    query.outFields = ['*']

    // 执行查询
    const result = await featureLayer.queryFeatures(query)

    // 存储原始的ESRI要素对象到非响应式变量中
    window._tempFeatures = result.features

    // 将要素数据存储到响应式变量中
    allFeatures.value = result.features.map((feature, index) => ({
      _index: index,
      attributes: { ...feature.attributes },
      geometryInfo: feature.geometry
        ? {
            x: feature.geometry.type === 'point' ? (feature.geometry as __esri.Point).x : null,
            y: feature.geometry.type === 'point' ? (feature.geometry as __esri.Point).y : null,
            type: feature.geometry.type,
          }
        : null,
    }))
  } catch (error) {
    console.error('查询景点数据失败', error)
    allFeatures.value = []
  } finally {
    loading.value = false
  }
}

// 初始化地图
const initMap = async () => {
  // 创建地图实例
  const map = new Map({
    basemap: {
      baseLayers: [gaodeLayer],
    },
  })

  // 创建地图视图
  view = new MapView({
    container: 'scenicMapView',
    map: map,
    center: areaCenters[activeArea.value as keyof typeof areaCenters], // 根据当前选中的景区设置中心点
    zoom: 13,
    popup: {
      dockEnabled: true,
      dockOptions: {
        buttonEnabled: false,
        breakpoint: false,
      },
    },
  })

  // 创建要素图层
  featureLayer = new FeatureLayer({
    url: 'https://services8.arcgis.com/hvBaJk0FLVU4yP47/arcgis/rest/services/ScenicPointLayer/FeatureServer/0',
    outFields: ['*'],
    popupEnabled: false,
    renderer: {
      type: 'unique-value',
      field: 'ScenicType',
      defaultSymbol: {
        type: 'simple-marker',
        color: [156, 156, 156],
        size: 12,
        outline: {
          color: [255, 255, 255],
          width: 2,
        },
      },
      uniqueValueInfos: [
        {
          value: '自然景观',
          symbol: {
            type: 'simple-marker',
            color: [56, 168, 0],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '人文景观',
          symbol: {
            type: 'simple-marker',
            color: [0, 112, 255],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '历史遗迹',
          symbol: {
            type: 'simple-marker',
            color: [230, 162, 60],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '休闲娱乐',
          symbol: {
            type: 'simple-marker',
            color: [245, 108, 108],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
        {
          value: '观景台',
          symbol: {
            type: 'simple-marker',
            color: [144, 147, 153],
            size: 12,
            outline: {
              color: [255, 255, 255],
              width: 2,
            },
          },
        },
      ],
    },
    // 添加标注
    labelingInfo: [
      {
        symbol: {
          type: 'text',
          color: '#333333',
          haloColor: '#ffffff',
          haloSize: 2,
          font: {
            size: 10,
            weight: 'normal',
          },
        },
        labelPlacement: 'above-center',
        labelExpressionInfo: {
          expression: '$feature.ScenicName',
        },
        minScale: 50000,
        maxScale: 0,
      },
    ],
  })

  // 将图层添加到地图
  map.add(featureLayer)

  // 添加点击事件监听器以选择要素
  view.on('click', async (event) => {
    const hitResults = (await view?.hitTest(event))?.results as __esri.MapViewGraphicHit[]
    const feature = hitResults.find((result) => result.layer?.id === featureLayer?.id)?.graphic

    if (feature) {
      // 提取属性数据
      currentFeature.value = extractFeatureData(feature)

      // 显示详情抽屉
      showDetailsDrawer.value = true

      // 添加高亮效果
      highlightFeatureOnMap(feature)
    }
  })

  // 加载要素数据
  await queryAllFeatures()
}

// 获取当前景区名称
const getCurrentAreaName = () => {
  switch (activeArea.value) {
    case 'erdihu':
      return '胶南灵山岛保护区'
    case 'yunmen':
      return '大公岛保护区'
    case 'bailang':
      return '大泽山保护区'
    case 'xiashan':
      return '崂山保护区'
    case 'binhai':
      return '胶州艾山保护区'
    case 'mihe':
      return '马山保护区'
    default:
      return ''
  }
}

// 处理景区切换
const handleAreaChange = () => {
  // 将地图中心移动到选中的景区
  view?.goTo({
    center: areaCenters[activeArea.value as keyof typeof areaCenters],
    zoom: 13,
  })

  // 更新地图上的点
  updateMapPoints()
}

// 处理类型筛选变化
const handleTypeChange = () => {
  updateMapPoints()
}

// 处理状态筛选变化
const handleStatusChange = () => {
  updateMapPoints()
}

// 更新地图上的点
const updateMapPoints = () => {
  if (!featureLayer) return

  // 构建筛选条件
  let whereClause = '1=1'

  // 添加类型筛选
  if (selectedTypes.value.length > 0 && selectedTypes.value.length < 5) {
    const typeConditions = selectedTypes.value.map((type) => `ScenicType='${type}'`).join(' OR ')
    whereClause += ` AND (${typeConditions})`
  }

  // 添加状态筛选
  if (selectedStatus.value.length > 0 && selectedStatus.value.length < 3) {
    const statusConditions = selectedStatus.value.map((status) => `Status='${status}'`).join(' OR ')
    whereClause += ` AND (${statusConditions})`
  }

  // 应用筛选
  featureLayer.definitionExpression = whereClause
}

// 查看要素详情
const viewFeatureDetails = (spot: any) => {
  currentFeature.value = spot
  showDetailsDrawer.value = true

  // 加载反馈信息
  loadMaintenanceInfo(spot)

  // 如果有几何信息，在地图上高亮显示
  if (spot.geometryInfo) {
    // 从原始要素中找到对应的要素
    const originalFeature = window._tempFeatures?.find(
      (f) => f.attributes.OBJECTID === spot.attributes.OBJECTID,
    )

    if (originalFeature) {
      highlightFeatureOnMap(originalFeature)
    }
  }
}

// 加载反馈信息
const loadMaintenanceInfo = (feature: any) => {
  maintenanceInfo.value = []

  if (feature && feature.attributes && feature.attributes.MaintanceDataJson) {
    try {
      const maintanceData = JSON.parse(feature.attributes.MaintanceDataJson)
      if (Array.isArray(maintanceData) && maintanceData.length > 0) {
        maintenanceInfo.value = maintanceData
      }
    } catch (e) {
      console.error('解析反馈数据失败', e)
    }
  }
}

// 在地图上高亮显示要素
const highlightFeatureOnMap = (feature: any) => {
  if (!feature || !feature.geometry) return

  // 清除之前的高亮
  view?.graphics.removeAll()

  // 创建高亮符号
  const highlightSymbol = new SimpleMarkerSymbol({
    color: [255, 255, 255, 0.8],
    size: 16,
    outline: {
      color: [0, 122, 194],
      width: 3,
    },
  })

  // 创建高亮图形
  const highlightGraphic = new Graphic({
    geometry: feature.geometry,
    symbol: highlightSymbol,
  })

  // 添加到地图
  view?.graphics.add(highlightGraphic)

  // 将视图中心移动到要素位置
  view?.goTo({
    target: feature.geometry,
    zoom: 15,
  })
}

// 添加到收藏
const addToFavorites = (feature: any) => {
  if (!feature) return

  // 这里可以实现收藏功能，例如存储到本地存储或发送到服务器
  ElMessage.success(`已收藏保护区: ${feature.attributes.Name}`)
}

// 信息反馈
const reportMaintenance = (feature: any) => {
  if (!feature) return

  // 将保护区ID作为参数传递给信息反馈页面
  router.push({
    path: '/maintenance-report',
    query: { id: feature.attributes.OBJECTID }
  })
}

// 获取反馈状态标签类型
const getMaintenanceStatusType = (status: string) => {
  switch (status) {
    case 'pending':
      return 'warning'
    case 'in-progress':
      return 'primary'
    case 'resolved':
      return 'success'
    default:
      return 'info'
  }
}

// 获取反馈状态文本
const getMaintenanceStatusText = (status: string) => {
  switch (status) {
    case 'pending':
      return '待处理'
    case 'in-progress':
      return '处理中'
    case 'resolved':
      return '已解决'
    default:
      return '未知'
  }
}

// 获取反馈严重程度文本
const getMaintenanceSeverityText = (severity: string) => {
  switch (severity) {
    case 'minor':
      return '轻微'
    case 'moderate':
      return '中等'
    case 'critical':
      return '严重'
    default:
      return '未知'
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  try {
    const date = new Date(dateString)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch (e) {
    return dateString
  }
}

// 返回首页
const goBack = () => {
  router.push('/')
}

// 监听筛选条件变化
watch([selectedTypes, selectedStatus], () => {
  updateMapPoints()
})

// 页面加载完成后初始化地图
onMounted(() => {
  initMap()
})
</script>

<style scoped lang="scss">
.scenic-recommend-container {
  padding: 20px;
}

.scenic-recommend-header {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-left: 4px solid #e6a23c;
}

.header-actions {
  margin-bottom: 15px;
}

.scenic-recommend-header h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 8px;
}

.scenic-recommend-header p {
  color: #606266;
  font-size: 14px;
}

.map-container {
  height: 300px;
  width: 100%;
  position: relative;
}

.recommend-card,
.map-card,
.filter-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommend-list {
  margin-top: 15px;
}

.scenic-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
}

.scenic-image {
  height: 180px;
  position: relative;
  overflow: hidden;

  .el-image {
    width: 100%;
    height: 100%;
  }

  .scenic-type {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
  }
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 24px;
}

.scenic-info {
  padding: 15px;

  h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #303133;
  }

  .scenic-desc {
    color: #606266;
    font-size: 14px;
    margin-bottom: 10px;
    height: 40px;
    overflow: hidden;
  }

  .scenic-price {
    color: #f56c6c;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .scenic-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.filter-options {
  padding: 10px 0;

  .el-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* 详情页样式 */
.feature-details {
  padding: 20px;
}

.details-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.no-feature-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.maintenance-info {
  margin-top: 20px;
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}

.maintenance-info h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
}

.maintenance-item {
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.maintenance-item p {
  margin-bottom: 8px;
}

.maintenance-image {
  margin: 10px 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .scenic-recommend-container {
    padding: 10px;
  }

  .map-container {
    height: 250px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>

